<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span style="font-weight:700">申请列表</span>
            </div>
        </template>
        <el-table :data="queryList" style="width: 100%" empty-text="无">
            <el-table-column prop="id" label="编号" width="400" />
            <el-table-column prop="realName" label="申请人" width="400" />
            <el-table-column prop="gmtCreate" label="申请时间" width="400" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="info" plain @click="look(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="dialogFormVisible" title="用户申请" width="30%" center>
            <el-dialog v-model="innerVisible" width="30%" title="填写原因" append-to-body center>
                <el-input v-model="reason" type="textarea" maxlength="60" :rows="3"></el-input>               
                <template #footer>
                    <el-button @click="disagree">确定</el-button>
                </template>
            </el-dialog>
            <el-row gutter="20" class="row-content">
                <el-col :span="6">
                    <div>申请人：</div>
                </el-col>
                <el-col :span="18">
                    <div>{{ dialogForm.realName }}</div>
                </el-col>
            </el-row>
            <el-row gutter="20" class="row-content">
                <el-col :span="6">
                    <div>个人介绍：</div>
                </el-col>
                <el-col :span="18">
                    <div>{{ dialogForm.introduce }}</div>
                </el-col>
            </el-row>
            <el-row gutter="20" class="row-content">
                <el-col :span="6">
                    <div>学历：</div>
                </el-col>
                <el-col :span="18">
                    <div>{{ dialogForm.qualification1 }}</div>
                </el-col>
            </el-row>
            <el-row gutter="20" class="row-content">
                <el-col :span="6">
                    <div>个人照片：</div>
                </el-col>
                <el-col :span="18">
                    <el-image style="width: 180px; height: 180px" :src="dialogForm.qualification2"
                        :preview-src-list="[dialogForm.qualification2, dialogForm.qualification3]" :initial-index="0"
                        fit="cover" />
                </el-col>
            </el-row>
            <el-row gutter="20" class="row-content">
                <el-col :span="6">
                    <div>证明材料：</div>
                </el-col>
                <el-col :span="18">
                    <el-image style="width: 180px; height: 180px" :src="dialogForm.qualification3"
                        :preview-src-list="[dialogForm.qualification2, dialogForm.qualification3]" :initial-index="1"
                        fit="cover" />
                </el-col>
            </el-row>
            <template #footer>
                <span>
                    <el-button type="primary" @click="agree" size="large">同意</el-button>
                    <el-button type="danger" @click="innerVisible = true" size="large">不同意</el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { apiQueryCheckList, apiResult } from '@/apis/inspect'
let dialogFormVisible = ref(false);
let innerVisible = ref(false);
interface queryModel {
    realName: string,
    gmtCreate: string,
    id: string,
    introduce: string,
    qualification1: string,
    qualification2: string,
    qualification3: string,
}
let dialogForm: queryModel = reactive({ realName: '', gmtCreate: '', id: '', introduce: '', qualification1: '', qualification2: '', qualification3: '' })
let queryList = reactive<Array<queryModel>>([])
let getQueryCheckList = async () => {
    let res = await apiQueryCheckList()
    let list: Array<queryModel> = res.data.data.expertCheckList
    queryList.length = 0;
    queryList.push(...list); 
    console.log(queryList)
}
getQueryCheckList()

let look = (row: any) => {
    dialogFormVisible.value = true;
    Object.assign(dialogForm, row);
    console.log(dialogForm, 123)
}


let agree = async () => {
    let res = await apiResult(dialogForm.id, 1);
    if (res.data.success) {
        ElMessage.success('成功')
        dialogFormVisible.value = false
    } else {
        ElMessage.error('失败')
    }
    getQueryCheckList()
    console.log(res)
}
let reason = ref('')
let disagree = async () => {
    // dialogFormVisible.value = false; 
    let res = await apiResult(dialogForm.id, 0, reason.value);
    if (res.data.success) {
        ElMessage.success('成功')
        dialogFormVisible.value = false
    } else {
        ElMessage.error('失败')
    }
    innerVisible.value = false;
    getQueryCheckList()
    console.log(res)
}
</script>
<style scoped lang="scss">
.box-card {
    margin-top: 20px;
}

.row-content {
    margin: 10px;
}
</style>